<template>
  <div class="ele-body">
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <el-form :model="where" class="ele-form-search" label-width="77px" @keyup.enter.native="reload"
               @submit.native.prevent>
        <el-row :gutter="15">
          <el-col :lg="6" :md="12">
            <el-form-item label="搜索查询:">
              <el-input v-model="where.keyword" clearable placeholder="请输入关键词"/>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="12">
            <el-form-item label="入库类别:">
              <el-select v-model="where.storage_type" class="ele-block" clearable placeholder="入库类别">
                <el-option v-for="(item, index) in storage_types" :key="index" :label="item" :value="item"/>
              </el-select>
            </el-form-item>

          </el-col>
          <el-col :lg="6" :md="12">
            <el-form-item label="仓库选择:">
              <el-autocomplete v-model="warehouse_name" :fetch-suggestions="querySearch" class="w-full"
                               placeholder="仓库选择" value-key="name" @select="handleSelectStock"></el-autocomplete>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="12">
            <div class="ele-form-actions">
              <el-button v-if="permission.includes('sys:bom:index')" class="ele-btn-icon" icon="el-icon-search"
                         type="primary" @click="reload">
                查询
              </el-button>
              <el-button @click="reset">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <!-- 数据表格 -->
      <ele-pro-table ref="table" :columns="columns" :datasource="url" :selection.sync="selection" :where="where"
                     height="calc(100vh - 312px)">
        <!-- 表头工具栏 -->
        <template slot="toolbar">
          <el-button-group>
            <el-button v-if="permission.includes('sys:bom-stock:add')" class="ele-btn-icon"
                       size="small" type="primary" @click="addStock">
              入库
            </el-button>
            <el-button v-if="permission.includes('sys:bom:remove')" class="ele-btn-icon" size="small" type="primary"
                       @click="removeStock">
              出库
            </el-button>
            <el-button v-if="permission.includes('sys:bom:distribution')" class="ele-btn-icon" size="small"
                       type="primary"
                       @click="distributionStock">
              调拨
            </el-button>
            <el-button v-if="permission.includes('sys:bom:allot')" class="ele-btn-icon" size="small" type="primary"
                       @click="allotStock">
              分配
            </el-button>
          </el-button-group>
        </template>

        <template slot="warn_status" slot-scope="{row}">
          <el-tag
            :type="row.safe_inventory >= row.inventory?'danger':'success'"
            effect="dark">
            {{ row.safe_inventory >= row.inventory ? '超限' : '正常' }}
          </el-tag>
        </template>


        <!-- 操作列 -->
        <template slot="action" slot-scope="{row}">
          <el-link v-if="permission.includes('sys:bom-stock:add')&&row.is_manager" :underline="false" type="primary"
                   @click="addStockSignal(row)"
          >
            入库
          </el-link>
          <el-link v-if="permission.includes('sys:bom:remove')&&row.is_manager" slot="reference" :underline="false"
                   @click="removeStockSignal(row)"
                   type="primary">
            出库
          </el-link>
          <el-link v-if="permission.includes('sys:bom:distribution')&&row.is_manager" :underline="false" type="primary"
                   @click="distributionStockSignal(row)"
          >
            调拨
          </el-link>
          <el-link v-if="permission.includes('sys:bom:allot')&&row.is_manager" :underline="false" type="primary"
                   @click="allStockSignal(row)"
          >
            分配
          </el-link>
          <el-link :underline="false" type="primary"
                   @click="applyStock(row)"
          >
            申领
          </el-link>
          <el-link v-if="permission.includes('sys:bom:safetyStock')&&row.is_manager" :underline="false" type="primary"
                   @click="setSafetyStock(row.id)"
          >
            安全库存
          </el-link>
        </template>
      </ele-pro-table>
    </el-card>
    <addStock :typeList="storage_types" ref="addStock" @reload="reload"></addStock>
    <removeStock :typeList="out_types" ref="removeStock" @reload="reload"></removeStock>
    <distributionStock ref="distributionStock" @reload="reload"></distributionStock>
    <allotStock ref="allotStock" @reload="reload"></allotStock>
    <applyStock ref="applyStock" @reload="reload"></applyStock>
    <addStockSignal ref="addStockSignal" @reload="reload" :typeList="storage_types"></addStockSignal>
    <removeStockSignal ref="removeStockSignal" @reload="reload" :typeList="out_types"></removeStockSignal>
    <distributionStockSignal ref="distributionStockSignal" @reload="reload"></distributionStockSignal>
    <allStockSignal ref="allStockSignal" @reload="reload"></allStockSignal>
    <set-safety-stock ref="SetSafetyStock" @reload="reload"></set-safety-stock>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import addStock from "@/views/bom/stock/components/addStock.vue";
import removeStock from "@/views/bom/stock/components/removeStock.vue";
import distributionStock from "@/views/bom/stock/components/distributionStock.vue";
import allotStock from "@/views/bom/stock/components/allotStock.vue";
import ApplyStock from "@/views/bom/stock/components/applyStock.vue";
import addStockSignal from "@/views/bom/stock/components/addStockSignal.vue"
import removeStockSignal from "@/views/bom/stock/components/removeStockSignal.vue";
import distributionStockSignal from "@/views/bom/stock/components/distributionStockSignal.vue";
import allStockSignal from "@/views/bom/stock/components/allStockSignal.vue";
import SetSafetyStock from "@/views/bom/stock/components/setSafetyStock.vue";

export default {
  name: 'SystemLevel',
  components: {
    SetSafetyStock,
    ApplyStock,
    addStock,
    removeStock,
    distributionStock,
    allotStock,
    addStockSignal,
    removeStockSignal,
    distributionStockSignal,
    allStockSignal,
  },
  computed: {
    ...mapGetters(["permission"]),
  },
  data() {
    return {
      warehouse_name: '',
      flag: false,
      // 表格数据接口inventories
      url: '/inventories',
      // 表格列配置
      columns: [
        // {
        //   columnKey: 'selection',
        //   type: 'selection',
        //   width: 45,
        //   align: 'center',
        //   fixed: "left"
        // },
        {
          prop: 'c_number',
          label: '编号',
          width: 150,
          align: 'center',
          showOverflowTooltip: true,
        },
        {
          prop: 'c_name',
          label: '名称',
          showOverflowTooltip: true,
          minWidth: 100,
          align: 'center',
        },
        {
          prop: 'type_name',
          label: '类别',
          showOverflowTooltip: true,
          minWidth: 100,
          align: 'center',
        },
        {
          prop: 'model',
          label: '型号',
          showOverflowTooltip: true,
          minWidth: 150,
          align: 'center',
        },
        {
          prop: 'uom',
          label: '单位',
          showOverflowTooltip: true,
          minWidth: 160,
          align: 'center'
        },
        {
          prop: 'warehouse_name',
          label: '仓库',
          showOverflowTooltip: true,
          minWidth: 160,
          align: 'center'
        },
        {
          prop: 'inventory',
          label: '库存数量',
          showOverflowTooltip: true,
          minWidth: 160,
          align: 'center'
        },
        {
          prop: 'safe_inventory',
          label: '安全库存',
          showOverflowTooltip: true,
          minWidth: 160,
          align: 'center'
        },
        {
          slot: 'warn_status',
          label: '预警状态',
          showOverflowTooltip: true,
          minWidth: 160,
          align: 'center'
        },
        {
          columnKey: 'action',
          label: '操作',
          width: 280,
          align: 'center',
          resizable: false,
          slot: 'action',
          emptyText: '暂无',
          fixed: "right"
        },
      ],
      // 表格搜索条件
      where: {},
      // 表格选中数据
      selection: [],
      // 当前编辑数据
      current: null,
      // 是否显示编辑弹窗
      showEdit: false,
      // 是否显示导入弹窗
      showImport: false,
      options: [],
      /*入库类别*/
      storage_types: [],
      /*出库类别*/
      out_types: [],
    };
  },
  mounted() {
    this.getParams()
  },
  methods: {
    /* 刷新表格 */
    reload() {
      this.$refs.table.reload({where: this.where});
    },
    /* 重置搜索 */
    reset() {
      this.warehouse_name = ''
      this.where = {};
      this.reload();
    },
    /*获取参数*/
    getParams() {
      this.$http.get(`/inventories/params`).then((res) => {
        if (res.data.code === 0) {
          this.storage_types = res.data.data.storage_types
          this.out_types = res.data.data.out_types
        }
      })
    },
    /*选择仓库*/
    handleSelectStock(val) {
      this.where.warehouse_id = val.id
    },
    /*获取仓库列表*/
    querySearch(query, cb) {
      query = query ? query : ''
      this.$http.get(`/warehouses?name=${query} `).then((res) => {
        cb(res.data.data)
      });
    },
    /*单个入库*/
    addStockSignal(info) {
      info.c_status === 0 || info.c_deleted === 1 ? this.$message.error('该备件所属品类已被禁用或删除') : this.$refs.addStockSignal.active(info)
    },
    /*单个出库*/
    removeStockSignal(info) {
      this.$refs.removeStockSignal.active(info)
    },
    /*单个调拨*/
    distributionStockSignal(info) {
      this.$refs.distributionStockSignal.active(info)
    },
    /*单个分配*/
    allStockSignal(info) {
      this.$refs.allStockSignal.active(info)
    },
    /*入库*/
    addStock(info) {
      this.$refs.addStock.active(info)
    },
    /*出库*/
    removeStock(info) {
      this.$refs.removeStock.active(info)
    },
    /*调拨*/
    distributionStock(info) {
      this.$refs.distributionStock.active(info)
    },
    /*分配*/
    allotStock(info) {
      this.$refs.allotStock.active(info)
    },
    /*申领*/
    applyStock(info) {
      this.$refs.applyStock.active(info)
    },
    /*设置安全库存*/
    setSafetyStock(id) {
      this.$refs.SetSafetyStock.active(id)
    },
  }
}
</script>

<style scoped>
</style>
